<template>
    <div ><el-row>
  <el-col :span="12"><div class="grid-content bg-purple"><el-button-group>
            <el-button @click="addUI" type="success" icon="el-icon-edit">添加</el-button>
            
            </el-button-group></div></el-col>
  <el-col :span="11"><div class="grid-content bg-purple-light">
    <el-input 
              placeholder="请输入内容"
              v-model="name"
              clearable>
            </el-input>
            </div></el-col>
  <el-col :span="1"><div class="grid-content bg-purple-light" style="float:left">
    <el-button @click="find()" type="success" icon="el-icon-search"></el-button>
  </div></el-col>
</el-row>
        <!--商品信息-->
          <el-table   
            border
            style="width: 100%"
            :data="pagination.records"
            ref="userTable"
            >
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
            <!--自定模板-->
             <el-table-column label="头像">
                <template slot-scope="scope">
                     <img v-if="scope.row.imgname!=null" :src="$imgHost+scope.row.imgname" width="150px" height="150px"/>
                </template>
             </el-table-column>

            <el-table-column v-for="column in columns" :key="column.prop"
            :prop="column.prop"
            :label="column.label"
            :width="column.width">
            </el-table-column>

            


         <!--操作列-->
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleEdit( scope.row)">编辑</el-button>
                    
                    
                <el-popconfirm 
                    icon="el-icon-question"
                    icon-color="red"
                    title="是否确定删除该记录？"
                    @confirm="handleDelete(scope.row)"
                    >
                  <el-button size="mini" type="danger" slot="reference">删除</el-button>
              </el-popconfirm>
                </template>
                </el-table-column>

        </el-table>

        <!--分页 -->
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.current"
            :page-sizes="[2,3,4,5]"
            :page-size="pagination.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
        </el-pagination>

        <!--添加-->
        <el-dialog title="添加商品信息" :visible.sync="addTag" 
        :close-on-click-modal="false" top="10px">
            <el-form label-width="100px">
                <el-form-item label="产品名称"  >
                   <el-input v-model="material.materialname" autocomplete="off"></el-input>
                </el-form-item> 

                <el-form-item label="产品类型"  >
                    <el-select v-model="material.categoryid" placeholder="请选择">
                  <el-option
                  v-for="item in options"
                  :key="item.categoryid"
                  :label="item.categoryname"
                  :value="item.categoryid">
                  </el-option>
                    </el-select>
                </el-form-item> 

                <el-form-item label="供应商"  >
                   <el-select v-model="material.supplierid" placeholder="请选择">
                  <el-option
                  v-for="item in suppliers"
                  :key="item.supplierid"
                  :label="item.suppliername"
                  :value="item.supplierid">
                  </el-option>
                    </el-select>
                </el-form-item> 
                
                   <el-form-item label="规格"  >
                   <el-input v-model="material.standard" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="单位"  >
                   <el-input v-model="material.unit" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="单价"  >
                   <el-input v-model="material.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="重量"  >
                   <el-input v-model="material.weight" autocomplete="off"></el-input>
                </el-form-item>
                 <el-form-item label="头像"  >
                    <el-upload
                    name="imgname"
                    class="avatar-uploader"
                    action="http://localhost:9090/upload/upload"
                    :show-file-list="false"
                    :on-success="handleSuccess"
                    >
                    <img v-if="imageUrl" :src="this.$imgHost+imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>                  
               
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addTag = false">取 消</el-button>
                <el-button type="primary" @click="add()">确 定</el-button>
            </div>
            </el-dialog>

             <!--修改-->
        <el-dialog title="修改商品信息" :visible.sync="updateTag" 
        :close-on-click-modal="false" top="10px">
            <el-form label-width="100px">
                <el-form-item label="产品名称"  >
                   <el-input v-model="material.materialname" autocomplete="off"></el-input>
                </el-form-item> 

                
                   <el-form-item label="规格"  >
                   <el-input v-model="material.standard" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="单位"  >
                   <el-input v-model="material.unit" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="单价"  >
                   <el-input v-model="material.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="重量"  >
                   <el-input v-model="material.weight" autocomplete="off"></el-input>
                </el-form-item>
                 <el-form-item label="头像"  >
                    <el-upload
                    name="imgname"
                    class="avatar-uploader"
                    action="http://localhost:9090/upload/upload"
                    :show-file-list="false"
                    :on-success="handleSuccess"
                    >
                    <img v-if="material.imgname" :src="this.$imgHost+material.imgname" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>                  
               
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateTag = false">取 消</el-button>
                <el-button type="primary" @click="update()">确 定</el-button>
            </div>
            </el-dialog>
             
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
          options:[],
          suppliers:[],
          columns:[
              {prop:'materialname',label:'商品名称',width:'200'},
              {prop:'standard',label:'规格',width:'150'},
              {prop:'unit',label:'单位',width:'50'},
              {prop:'price',label:'单价',width:'50'},
              {prop:'weight',label:'重量（kg）',width:'100'},
              {prop:'materialCategory.categoryname',label:'产品类型',width:'100'},
              {prop:'supplier.suppliername',label:'供应商',width:'250'},
          ],
         pagination:{},
         material:{},
         addTag:false,
         name:'',
         imageUrl:'',
         addTag2:false,
         updateTag:false,
        }
    },
    components: {},
    methods: {
      find(page=1,size=2){
          let url="/material/selectMaterial";
          let params=new URLSearchParams();
          params.append('page',page);
          params.append('size',size);
          params.append('name',this.name);
          this.$axios.post(url,params).then(resp=>{
                console.log(resp.data);
               this.pagination=resp.data;
          });
      },
      //删除
      handleDelete(row){
        console.log(row)
          
        //异步删除
        var url="material/deleteMaterial";  
        var params=new URLSearchParams();
        params.append("id",row.materialid);
        this.$axios.post(url,params).then(resp=>{
            this.$message({
              message:"删除成功:"+row.materialid,
              type:"success"
          })
        });
        this.find();

      },
      //修改
      handleEdit(row){
          
               this.updateTag=true;
                this.material=row;
                console.log(row);
          
      },
      handleSizeChange(size){
             this.find(this.pagination.current,size);
      },
      handleCurrentChange(page){
         this.find(page,this.pagination.size);
      },
      addUI(){
         let url="/material/materialSupplier";
          this.$axios.post(url).then(resp=>{
               this.options=resp.data.categories;
               console.log(resp.data);
               this.suppliers=resp.data.suppliers;
               this.addTag=true;
               this.material={};
          });
          
      },
      handleSuccess(resp,file,flieList){
            console.log(resp);
            console.log(this.$imgHost);
           file.url=resp.data;
           this.imageUrl=file.url;
           //将上传后的路径设置到user的photo属性
           this.material.imgname=resp.data;
      },
      add(){
          var url="/material/insertMaterial";
          this.$axios.post(url,this.material).then(resp=>{
                
               this.addTag=false;
               this.material={};
               this.imageUrl='';
               this.$message({
                   message:"添加成功",
                   type:'success'
               })
          });
          this.find();
      },
      update(){
          var url="/material/updateMaterial";
          this.$axios.post(url,this.material).then(resp=>{
            this.material={};
            this.imageUrl='';
            this.updateTag=false;
            this.$message({
              message:"修改成功",
              type:'success'
            })
          });
      }
      
    },
    mounted() {
        this.find();
    },
}
</script>

<style  scoped>
.avatar-uploader-icon, .avatar {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader-icon:hover, .avatar:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

